<template>
	<view>
		<template v-if="loadFlag">
			<view class="loadingView flexAll">
				<loading :cirSize="30"></loading>
				<view class="loadTxt">加载中...</view>
			</view>
		</template>
		<template v-else>
			<view class="tabNav hasFlex">
				<view class="navItem xk">
					<picker class="pickerView" @change="bindSubject" :value="subIndex" :range="subject" range-key="subName">
						<text class="payTypeTxt">{{subject[subIndex].subName}}</text>
						<text class="iconfont icon-sanjiao"></text>
					</picker>
				</view>
				<view class="navItem cbs">
					<picker class="pickerView" @change="bindPub" :value="pubIndex" :range="pubArr" range-key="ediName">
						<text class="payTypeTxt">{{pubArr[pubIndex].ediName}}</text>
						<text class="iconfont icon-sanjiao"></text>
					</picker>
				</view>
			</view>
			<!-- 出版社对应科目列表上下册 -->
			<view class="subWrap">
				<template v-if="isHasDataFlag">
					<view class="subList"
						v-for="(item,index) in studyList"
						:key="index"
						@tap="goChapterList(item.eduId)"
					>
						<view class="subImgPar">
							<image class="subImg samePar" :src="getUrl(item.subImg)"></image>
							<view class="currSubTxt">{{gradeName}}{{item.eduVolume}}</view>
						</view>
						<view class="subCon">
							<view class="conItem">
								<text>当前状态</text>
								<text class="realVal">{{item.freeStatus}}</text>
							</view>
							<view class="conItem">
								<text>已使用</text>
								<text class="realVal">{{item.studyDays}}天</text>
							</view>
							<view class="conItem">
								<text>还剩</text>
								<text class="realVal" :class="[item.remainDays > 0 ? '' : 'overDate']">{{calReaminDays(item.remainDays)}}</text>
							</view>
							<view class="conItem">
								<text>使用期限</text>
								<text class="realVal">{{item.date_range}}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="isHasDataFlag == false">
					<no-data :noDataTxt="noDataTxt"></no-data>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import { getInitStudyData } from '@/api/zhuxue'
	export default {
		data() {
			return {
				loadFlag:true,
				subject:[{}],
				subIndex:0,
				pubArr:[{}],
				pubIndex:0,
				puberTxt:'',
				studyList:[],
				isHasDataFlag:null,
				gradeName:'',
				//gradeNo:'',
				subId:'',
				editId:'', 
				noDataTxt:'暂无教材,请选择学科或出版社',
			}
		},
		onLoad(options) {
			this.getInitStudyData();
		},
		computed:{
			calReaminDays(){
				return function(remainDays){
					if(remainDays != undefined){
						var currTxt = '';
						if(remainDays > 0){
							currTxt = remainDays + '天';
						}else{
							currTxt = '已过期' + Math.abs(remainDays) + '天'
						}
						return currTxt
					}
				}
			},
			getUrl(){
				return function(url){
					return this.zhuXueServer + '/' + url
				}
			}
		},
		methods: {
			goChapterList(eduId){
				uni.navigateTo({
					url:'/pages/subIndex/chapterList/chapterList?eduId=' + eduId + '&puberTxt=' + this.puberTxt
				})
			},
			getInitStudyData(){
				this.loadFlag = true;
				var field = { account:uni.getStorageSync('token'),subId:this.subId,ediId:this.editId,client:'app' };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getInitStudyData({content:contentStr}).then(res=>{
					this.loadFlag = false;
					var tmpRes = res.data.datas;
					this.subject = tmpRes.subList;
					this.pubArr = tmpRes.ediList;
					if(tmpRes.studyList.length > 0){
						this.studyList = tmpRes.studyList;
						this.isHasDataFlag = true;
					}else{
						this.studyList = [];
						this.isHasDataFlag = false;
					}
					this.gradeName = tmpRes.gradeList[0].gradeName;
					for(let i in this.subject){
						if(this.subject[i].selFlag){
							this.subId = this.subject[i].subId;
						}
					}
					for(let j in this.pubArr){
						if(this.pubArr[j].selFlag){
							this.puberTxt = this.pubArr[j].ediName;
							this.editId = this.pubArr[j].ediId;
						}
					}
				}).catch(err=>{
					this.subject = [];
					this.studyList = [];
					this.loadFlag = false;
					console.log(err)
				});
			},
			bindSubject(e){
				this.subIndex = e.target.value;
				this.subId = this.subject[this.subIndex].subId;
				this.getInitStudyData();
			},
			bindPub(e){
				this.pubIndex = e.target.value;
				this.editId = this.pubArr[this.pubIndex].ediId;
				this.puberTxt = this.pubArr[this.pubIndex].ediName;
				this.getInitStudyData();
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.subList{
		display: flex;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 20rpx;
		@include respTo(phone){
			padding: 30rpx;
		}
		@include respTo(pad){
			padding: 20rpx;
		}
		.subImgPar{
			@include respTo(phone){
				width: 219rpx;
				height: 200rpx;
			}
			@include respTo(pad){
				width: 200rpx;
				height: 180rpx;
			}
			border-radius: 16rpx;
			margin-right: 15rpx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.samePar{
				border-radius: 16rpx;
				background: #fff;
			}
			.currSubTxt{
				line-height: 40rpx;
				position: absolute;
				color: #fff;
				@include respTo(phone){
					left: 80rpx;
					bottom: 10rpx;
					font-size: $font-size24;
				}
				@include respTo(pad){
					left: 70rpx;
					bottom: 6rpx;
					font-size: $padSize16;
				}
			}
		}
		.subCon{
			flex: 1;
			@include respTo(phone){
				height: 200rpx;
			}
			.conItem{
				@include respTo(phone){
					font-size: $font-size28;
					height: 50rpx;
				}
				@include respTo(pad){
					font-size: $padSize16;
					height: 46rpx;
				}
				color: $pss-text-colora;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.realVal{
					color: $pss-text-color3;
					&.overDate{
						color: $pss-color-red;
					}
				}
			}
		}
	}
	.tabNav{
		background: #fff;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.xk{
			margin-left: 30rpx;
		}
		.cbs{
			margin-right: 30rpx;
		}
		.pickerView{
			display: flex;
			color: $pss-text-color3;
			justify-content: center;
			@include respTo(phone){
				height: 90rpx;
				line-height: 90rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height: 60rpx;
				line-height: 60rpx;
				font-size: $padSize16;
			}
			.icon-sanjiao{
				color: $pss-text-colora;
				@include respTo(pad){
					font-size: $padSize18;
				}
			}
		}
	}
</style>
